﻿@using System.Diagnostics
@using System.Text
@using WarSpot.Contracts.Service
@model List<WarSpotEvent>
@{
  Layout = null;

  var ecw = Model.First(e => e.EventType == EventTypes.SystemEventWorldCreated) as SystemEventWorldCreated;
  
  // todo //!! detect this vars
  int W = 800, H = 600;
	Debug.Assert(ecw != null, "eCW != null");
	int worldW = ecw.Width, worldH = ecw.Height;
  
  var sb = new StringBuilder();
  foreach (var e in Model)
  {
    switch (e.EventType)
    {
    case EventTypes.GameEventBirth:
      var ee = e as GameEventBirth;
      sb.Append("jsGameEvents[\"").Append(0).Append("\"].push(new {id: \"").Append(ee.Newborn.Id).Append("\"});\n");
      break;
    default:
      break;
    }
  }

}
<script type="text/javascript">
  var H = @H;
  var W = @W;
  var worldH = @worldH;
  var worldW = @worldW;
  var stepX = W / worldW;
  var stepY = H / worldH;
  var canvas;
  var context;
  var field = new Array(worldH);
  for (var i = 0; i < worldH; i++) {
    field[i] = new Array(worldW);
  var beings = new Array();
  }
  var jsGameEvents = new Array();

// fill event list
  @Html.Raw(sb.ToString())

  // end fill list
  
  function initVars() {
    canvas = document.getElementById("mainCanvas");
    context = canvas.getContext("2d");
    stepX = W / worldW;
    stepY = H / worldH;
  }

  function drawGrid() 
  {
    initVars();
    var i;
    for (i = 0; i < worldW; i++) {
      context.moveTo(i * stepX, 0);
      context.lineTo(i * stepX, H);
    }
    for (i = 0; i < worldH; i++) {
      context.moveTo(0, i * stepY);
      context.lineTo(W, i * stepY);
    }
    context.strokeStyle = "#eee";
    context.stroke();
  }

  function drawCell(x, y, energy) {
    if(energy > 10) {
      context.fillStyle = "#996633";
    }
    if(energy > 100) {
      context.fillStyle = "#FFCC33";
    }
    if(energy > 500) {
      context.fillStyle = "#33CC00";
    }
    context.fillRect(x * stepX, y * stepY);
  }

  function drawField() {
    drawGrid();
    for (var x = 0; x < worldW; x++) {
      for (var y = 0; y < worldH; y++) {
        drawField(x, y, field[x][y]);
      }
    }
  }

  function drawBeings() {
    for (var i = 0; i < beings.length; i++) {
  
    }
  }

  function stepDraw() {
    initVars();
    drawGrid();
    for (var x = 0.5; x < 500; x += 10) {
      context.moveTo(x, 0);
      context.lineTo(x, 375);
    }
  }
</script>
<table>
  <tr>
    <td style="background-color: #f00" width="10" height="10">
    </td>
    <td style="background-color: #0f0">
    </td>
  </tr>
</table>
<h3>
  Поле:
  <input type="button" onclick="stepDraw();" /></h3>
<div>
  <canvas id="mainCanvas" width="@W" height="@H" style="border:1px solid #000000;">
  </canvas></div>
